<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">院校</span>
    </van-col>
  </van-row>
  <div class="container">
    <div class="city-list">
      <van-sidebar v-model="activeKey" :title="'城市'" @change="handleSelectCity">
        <template #default>
          <van-sidebar-item v-for="(item, index) in cityList" :key="index" :title="item" :name="index" />
        </template>
      </van-sidebar>
    </div>
    <div class="school-list">
      <router-link :to="'/schoolDetails/' + item.schoolName" v-for="(item, index) in schoolList" :key="index" class="school-link">{{ item.schoolName }}</router-link>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { post } from '../../util/request.js';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const activeKey = ref(0);
    const cityList = ref(['北京', '天津', '上海', '重庆', '江苏', '浙江', '湖北', '广东', '四川', '浙江', '湖南', '厦门', '山东', '安徽']);
    const schoolList = ref([]);

    const handleSelectCity = async (key) => {
      const city = cityList.value[key];
      try {
        const res = await post(`home/school/selectByCity/${city}`);
        schoolList.value = res.data;
        console.log(schoolList.value);
      } catch (error) {
        console.error(error);
      }
    };

    // 修改这里，直接初始化为北京的索引
    onMounted(async () => {
      // 直接调用handleSelectCity并传入北京的索引，假设北京在列表中的索引为0
      await handleSelectCity(0);
    });

    return {
      activeKey,
      cityList,
      schoolList,
      handleSelectCity,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
}

.city-list {
  width: 200px;
}

.school-list {
  flex: 1;
  padding: 10px;
}

.school-link {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: block;
}
</style>